<template>
  <div class="bar-chart">
    <div v-for="(value, index) in data" :key="index" class="bar" :style="{ height: value + 'px' }">
      {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [72, 80, 79, 75, 67, 60, 10, 25, 19, 74, 52, 43]
    };
  }
};
</script>

<style scoped>
.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 300px; /* 图表的总高度，可以根据需要调整 */
  border: 1px solid #ddd; /* 边框样式，可以根据需要调整 */
}

.bar {
  width: 50px; /* 每个柱子的宽度，可以根据需要调整 */
  margin: 0 5px; /* 柱子之间的间距，可以根据需要调整 */
  background-color: #3498db; /* 柱子的颜色，可以根据需要调整 */
  text-align: center; /* 文字居中 */
  color: white; /* 文字颜色 */
  display: flex;
  align-items: flex-end; /* 文字对齐方式 */
  justify-content: center; /* 文字对齐方式 */
}
</style>
